import React from 'react';
import cass from 'classnames';
import _ from 'lodash';
import moment from 'moment';
import styles from './index.module.less';
import { getTimeStringAutoShort, toNow } from '../../utils/util';

function renderStatus({ chattype, grouptype, iscomplete, begintime, currentchatstagename }) {

    if (!chattype) {
        if (grouptype === 1) return iscomplete ? ['完成', 7] : [currentchatstagename || '委托', 5];
        return iscomplete ? ['完成', 8] : [currentchatstagename || '律师', 6];
    };
    const [statusText, gType] = toNow(begintime, iscomplete);
    return [statusText, gType];
}

export default function ChatListItem({ innerRef, data: v, chatId, chatDraftCache, activeGroupid, onClick, replaceFun }) {
    const useDangerHtml = replaceFun && v.projectid;
    const useDangerHtmlWhenTask = replaceFun && !v.projectid;
    return (
        <div className={styles.item}>
            <h3 dangerouslySetInnerHTML={useDangerHtml ? { __html: replaceFun(`[${v.stagename}] ${v.projectname}`) } : undefined}>
                {useDangerHtml ?
                    null : (
                        v.projectid ?
                            `[${v.stagename}] ${v.projectname}` :
                            moment(v.groups[0].begintime).format('YYYY-MM-DD HH:mm')
                    )
                }
            </h3>
            {
                v.groups.map(g => {
                    const [statusText, type] = renderStatus(g);
                    const count = _.get(g, 'SessionItem.UnreadMsgCount');
                    const { text, type: msgType } = _.get(g, 'SessionItem.MsgShow', {});
                    let msg = text;
                    if (replaceFun && g.relcount) {
                        if (g.relcount === 1 && g.content) {
                            msg = <span dangerouslySetInnerHTML={{ __html: replaceFun(g.content) }}></span>;
                        } else {
                            msg = `${g.relcount}条相关记录`;
                        }
                    }
                    const isLocation = msgType === 'TIMLocationElem';
                    const time = getTimeStringAutoShort(_.get(g, 'SessionItem.MsgTimeStamp', 0) * 1000, false);
                    let nick = _.get(g, 'SessionItem.C2cNick') || _.get(g, 'SessionItem.C2cAccount');
                    const isManage = _.get(g, 'SessionItem.C2cAccount') === '1';
                    if (isManage) nick = '通知';
                    else if (msgType === 'video') nick = '';
                    const hasSession = _.get(g, 'SessionItem.SessionId', false);
                    // 控制草稿字样显示
                    const cacheMsg = chatDraftCache && chatDraftCache[g.groupid];
                    const showCacheMsg = cacheMsg && chatId !== g.groupid;
                    // 控制@字样显示
                    const Mentioned = _.get(g, 'SessionItem.Mentioned');
                    return (
                        <div
                            ref={innerRef ? d => innerRef(d, g.groupid) : undefined}
                            key={g.groupid}
                            className={cass('hovergray', styles.wrap, { [styles.active]: activeGroupid === g.groupid })}
                            onClick={() => onClick(v, g)}
                        >
                            <div className={cass(styles.left, {
                                [styles.rectgreen]: type === 8,
                                [styles.circlegreen]: type === 7,
                                [styles.rect]: type === 6,
                                [styles.circle]: type === 5,
                                [styles.green]: type === 4,
                                [styles.red]: type === 3,
                                [styles.orange]: type === 2,
                                [styles.blue]: type === 1,
                            })}
                            >
                                {statusText}
                            </div>
                            <div className={styles.right}>
                                <div className={styles.right1}>
                                    <span dangerouslySetInnerHTML={useDangerHtmlWhenTask ? { __html: replaceFun(g.groupname) } : undefined}>
                                        {useDangerHtmlWhenTask ? null : g.groupname}
                                    </span>
                                    {hasSession ? <div>{time}</div> : null}
                                </div>
                                <div className={styles.right2}>
                                    {isLocation && <span className={styles.mention}>[位置]</span>}
                                    {!showCacheMsg && Mentioned && <span className={styles.mention}>[有人@我]</span>}
                                    {!showCacheMsg && nick ? `${nick}: ` : null}
                                    {!showCacheMsg ? msg : null}
                                    {
                                        showCacheMsg ? (
                                            <p className={styles.cache}>
                                                {Mentioned && <span>[有人@我]</span>}
                                                <span>[草稿]</span>
                                                {cacheMsg}
                                            </p>
                                        ) : null
                                    }
                                    {count ? (
                                        g.iscomplete ? <span className={cass('mdi', 'mdi-circle', styles.msgfinish)} /> : <div>{count}</div>
                                    ) : null}
                                </div>
                            </div>
                            {/* {gi === (v.groups.length - 1) ? null : <div className={styles.line} />} */}
                        </div>
                    )
                })
            }
        </div>
    )
}